<template>
  <div class="pay-container">
    <div class="money-container">
      支付金额：<span>￥{{ orderHeader.grandTotal }}</span>
    </div>
    <div class="desc-container">交易订单：{{ orderHeader.id }}</div>
    <div class="desc-container">购买物品{{ orderHeader.orderName }}</div>
    <div class="qrcode-container">
      <div
        id="payQrcode"
        ref="payQrcode"
        v-loading="qrcodeLoading"
        element-loading-text="支付码生成中..." />
    </div>
    <div class="payMethod-container">
      <el-button :type="payMethod==='alipay'?'primary':''" @click="changePay('alipay')">支付宝</el-button>
      <el-button :type="payMethod==='wxpay_v2'?'primary':''" @click="changePay('wxpay_v2')">微信(V2)</el-button>
      <el-button :type="payMethod==='wxpay_v3'?'primary':''" @click="changePay('wxpay_v3')">微信(V3)</el-button>

    </div>

  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      orderId: null,
      orderHeader: {},
      payMethod: 'alipay',
      qrcodeLoading: false,
      orderStatusInterval: null
    }
  },

  created() {

  },
  mounted() {
  },
  destroyed() {
    if (this.orderStatusInterval) {
      clearInterval(this.orderStatusInterval)
    }
  },
  methods: {
    init(orderId) {
      this.orderId = orderId
      this.payMethod = 'alipay'
      this.qrcodeLoading = false
      this.fetchOrder()
      this.fetchPayQrCode()
    },
    fetchOrder() {
      this.$store.dispatch('businessOrderHeaderGetById', this.orderId).then((res) => {
        this.orderHeader = res
      }).catch((_) => {})
    },
    fetchPayQrCode() {
      this.qrcodeLoading = true
      this.$store.dispatch('generatePayQrCode', {
        loading: false,
        orderId: this.orderId,
        payMethod: this.payMethod
      }).then((res) => {
        console.log(1111111, res)
        this.qrcodeLoading = false
        this.$nextTick(() => {
          document.getElementById('payQrcode').innerHTML = ''
          new QRCode(this.$refs.payQrcode, {
            text: res,
            width: 187,
            height: 187,
            colorDark: '#333333', // 二维码颜色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
          })
        })
        if (this.orderStatusInterval) {
          clearInterval(this.orderStatusInterval)
        }
        this.orderStatusInterval = setInterval(() => {
          this.orderStatusByOrderId()
        }, 2000)
      }).catch((_) => {
        this.qrcodeLoading = false
      })
    },
    changePay(pay) {
      this.payMethod = pay
      this.fetchPayQrCode()
    },
    orderStatusByOrderId() {
      this.$store.dispatch('orderStatusByOrderId', { orderId: this.orderId, loading: false }).then((res) => {
        if (res === 2) {
          if (this.orderStatusInterval) {
            clearInterval(this.orderStatusInterval)
          }
          this.msgSuccess('支付成功!')
          this.$emit('payNotify', true)
        }
      }).catch((_) => {})
    },
    clearInterval() {
      if (this.orderStatusInterval) {
        clearInterval(this.orderStatusInterval)
      }
    }
  }
}
</script>
  <style lang="scss" scoped>
  .pay-container{
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    height: 100%;
    .money-container{
      margin-bottom: 10px;
      span{
        font-size: 20px;
        font-weight: bolder;
        color: #ba9411;
      }
    }
    .desc-container{
      margin-bottom: 10px;
    }
    .qrcode-container{
      height: 200px;
      margin-bottom: 10px;
      #payQrcode{
        width: 197px;
        height: 197px;
        margin: 0 auto;
        border: 1px solid #e9e9e9;
        padding: 5px;
      }
    }
    .payMethod-container{
      margin-top: 40px;
      .el-button{
        width: 110px;
      }
    }
  }
  </style>
